<template>
    <div class="appmain">
      <div class="gobastyle">
        <span><i @click="goback"  class="iconfont icon-fanhui"></i></span>
      </div>
      <div class="main-child">
        <floorChange style="left:auto;right:50px;top:0"></floorChange>
          <div class="videodiv" v-for="(item, index) in video.videoFloorArry" :key="index" v-if="$route.query.floor === item.floorId && video.isShow">
            <video-player class="video-player vjs-custom-skin" v-for="(src, srcIndex) in item.videoSrc" :key="srcIndex" :playsinline="true" :options="{
              autoplay: true, //如果true,浏览器准备好时开始回放。
              loop: true, // 导致视频一结束就重新开始。
              aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如16:9或4:3）
              fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
              sources: [{
                type: 'video/mp4',
                src: src //你的m3u8地址（必填）
              }],
              width: '200px',
              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                timeDivider: false,
                durationDisplay: false,
                remainingTimeDisplay: false,
                fullscreenToggle: true  //全屏按钮
              }
            }"></video-player>
          </div>
      </div>
    </div>
</template>

<script>
import floorChange from '../child/floorChange'
import { videoPlayer } from 'vue-video-player';
export default {
  name: "abnormalvideo",
  data() {
    return {
      video: {
        isShow: false,
        videoFloorArry: [
          {
            floorId: 18,
            videoSrc: ["./static/video/video1.mp4"]
          },
          {
            floorId: 36,
            videoSrc: ["./static/video/video1.mp4", "./static/video/video2.mp4", "./static/video/video4.mp4"]
          }
        ]
      }
    };
  },
  components: {
    videoPlayer,
    floorChange
  },
  mounted(){
    setTimeout(() => {
      this.video.isShow = true
    }, 3000)
  },
  methods: {
    // 返回按钮
    goback() {
      viewBackFromFloorToBudling();
      this.$router.push({ path: "/home/Abnormalvideo" });
    }
  }
};
</script>

<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$iconcolor: #006fff;
$fontcolor1: #549f54;
$fontcolor2: #ffa628;
$fontcolor3: #00a0e9;
$fontcolor4: #6759be;
$mrtop: 13px;
.appmain {
  height: 100%;
  width: 27%;
  // margin-top: 20px;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 20px;
  .gobastyle{
    width: 40px;
    height: 40px;
    // background-color: salmon;
    position: absolute;
    right: 11%;
    top: 50px;
    .icon-fanhui{
      font-size: 0.30rem;
      color: white;
      position: absolute;
      z-index: 1;
      cursor: pointer;
    }
  }
  .mainicon {
    position: absolute;
    top: -40px;
    right: 0;
    color: #ddd;
    span {
      width: 40px;
      .iconfont {
        font-size: 24px;
      }
    }
    .icon-fanhui{
      cursor:pointer;
    }
    .icon-fangda{
      cursor:pointer;
    }
  }
  .addstyle{
    top: -67px;
    // right: 55px;
    right: 13%;
  }
  .main-child {
    height: 40%;
    width: 100%;
    position: absolute;
    top: 30%;
    padding: 15px;
  }
}
</style>
